<template xmlns:el-col="http://www.w3.org/1999/html">
  <!-- 组件中只有一个弹窗 -->
  <el-dialog
      v-model="DetectAddWinDialogVisible"
      title="添加检测项"
      width="50%"
      @close="handleClose"
  >
    <template #default>
      <el-form style="margin-top: 10px" :model="newDetect" label-width="auto">

        <el-row>
          <el-col :span="12">
            <el-form-item  label="检测项编码">
              <el-input  v-model="newDetect.detectEncode"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label="检测项名称">
              <el-input  v-model="newDetect.detectName"/>
            </el-form-item>
          </el-col>
          </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="检测项类型">
              <el-select  style="width:100px" v-model="newDetect.detectType">
                <el-option label="尺寸" :value="0"/>
                <el-option label="外观" :value="1"/>
                <el-option label="重量" :value="2"/>
                <el-option label="性能" :value="3"/>
                <el-option label="成分" :value="4"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检测工具">
              <el-input  v-model="newDetect.detectTool"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #footer>
      <div>
        <el-button @click="cancelnewDetect">取消</el-button>
        <el-button type="primary" @click="newDetectSubmit">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {onBeforeUnmount, onMounted, ref, shallowRef, watch} from 'vue'
import loginRequest from "@/api/login.js";
import {ElMessage} from "element-plus";
import qualityRequest from "@/api/quality.js";

// 申明这个组件的事件  editComplete
const emits = defineEmits(['addComplete','cancelDetectAdd'])
// 弹窗标记
let DetectAddWinDialogVisible = ref(false);
let props = defineProps(["detect","isShow"]);
// 编辑的项目对象
let newDetect = ref({})
// 富文本编辑器相关的属性
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})


/**
 * 取消编辑按钮事件
 */
function cancelnewDetect(){
  newDetect = ref({});
  DetectAddWinDialogVisible.value = false;
  emits("cancelDetectAdd")
}

/**
 * 关闭窗体前的回调函数
 */
function handleClose(){
  emits("cancelTaskAdd")
}
/**
 * 确定按钮
 */
function newDetectSubmit(){

  qualityRequest.insertDetect(newDetect.value,res=>{
    if(res.code == 200){
      ElMessage({
        type:"success",
        message:"新增成功"
      });
      // 关闭弹窗
      cancelnewDetect();

      // 触发编辑完成的事件
      emits('addComplete',res.data);
    }else{
      ElMessage({
        type:"warning",
        message:"新增失败"
      });
    }
  })
}
/**
 * 侦听器 侦听 props.isShow
 */
watch(()=>props.isShow,()=>{
  DetectAddWinDialogVisible.value = props.isShow;
});

</script>
<style scoped>

</style>